<template>
  <el-dialog
    v-model="dialogVisible"
    title="公告统计信息"
    width="800px"
    :close-on-click-modal="false"
    @open="loadStatistics"
  >
    <div v-loading="loading" class="statistics-container">
      <div v-if="statistics" class="statistics-content">
        <!-- 总体统计 -->
        <el-card class="stats-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>总体统计</span>
              <el-button type="primary" size="small" @click="loadStatistics">
                <el-icon><Refresh /></el-icon>
                刷新数据
              </el-button>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="stat-item">
                <div class="stat-value total">{{ statistics.total_count }}</div>
                <div class="stat-label">总公告数</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <div class="stat-value published">
                  {{ statistics.published_count }}
                </div>
                <div class="stat-label">已发布</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <div class="stat-value draft">{{ statistics.draft_count }}</div>
                <div class="stat-label">草稿</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item">
                <div class="stat-value expired">
                  {{ statistics.expired_count }}
                </div>
                <div class="stat-label">已过期</div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 状态分布 -->
        <el-card class="stats-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>状态分布</span>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="chart-container">
                <div class="chart-title">公告状态分布</div>
                <div class="status-chart">
                  <div class="status-item">
                    <div class="status-bar">
                      <div
                        class="status-fill draft-fill"
                        :style="{ width: getDraftPercentage() + '%' }"
                      />
                    </div>
                    <div class="status-info">
                      <span class="status-label">草稿</span>
                      <span class="status-value">{{
                        statistics.draft_count
                      }}</span>
                    </div>
                  </div>
                  <div class="status-item">
                    <div class="status-bar">
                      <div
                        class="status-fill published-fill"
                        :style="{ width: getPublishedPercentage() + '%' }"
                      />
                    </div>
                    <div class="status-info">
                      <span class="status-label">已发布</span>
                      <span class="status-value">{{
                        statistics.published_count
                      }}</span>
                    </div>
                  </div>
                  <div class="status-item">
                    <div class="status-bar">
                      <div
                        class="status-fill expired-fill"
                        :style="{ width: getExpiredPercentage() + '%' }"
                      />
                    </div>
                    <div class="status-info">
                      <span class="status-label">已过期</span>
                      <span class="status-value">{{
                        statistics.expired_count
                      }}</span>
                    </div>
                  </div>
                  <div class="status-item">
                    <div class="status-bar">
                      <div
                        class="status-fill deleted-fill"
                        :style="{ width: getDeletedPercentage() + '%' }"
                      />
                    </div>
                    <div class="status-info">
                      <span class="status-label">已删除</span>
                      <span class="status-value">{{
                        statistics.deleted_count
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="chart-container">
                <div class="chart-title">特殊标记统计</div>
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="置顶公告">
                    <el-tag type="warning">{{ statistics.top_count }}</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="弹窗公告">
                    <el-tag type="danger">{{ statistics.popup_count }}</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="总浏览量">
                    <el-tag type="success">{{
                      formatViewCount(statistics.total_view_count)
                    }}</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="平均浏览量">
                    <el-tag type="info">{{ getAverageViewCount() }}</el-tag>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 详细数据 -->
        <el-card class="stats-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>详细数据</span>
            </div>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="总公告数">
              {{ statistics.total_count }}
            </el-descriptions-item>
            <el-descriptions-item label="草稿数量">
              {{ statistics.draft_count }}
            </el-descriptions-item>
            <el-descriptions-item label="已发布数量">
              {{ statistics.published_count }}
            </el-descriptions-item>
            <el-descriptions-item label="已过期数量">
              {{ statistics.expired_count }}
            </el-descriptions-item>
            <el-descriptions-item label="已删除数量">
              {{ statistics.deleted_count }}
            </el-descriptions-item>
            <el-descriptions-item label="置顶数量">
              {{ statistics.top_count }}
            </el-descriptions-item>
            <el-descriptions-item label="弹窗数量">
              {{ statistics.popup_count }}
            </el-descriptions-item>
            <el-descriptions-item label="总浏览次数">
              {{ formatViewCount(statistics.total_view_count) }}
            </el-descriptions-item>
            <el-descriptions-item label="发布率">
              {{ getPublishRate() }}%
            </el-descriptions-item>
            <el-descriptions-item label="过期率">
              {{ getExpireRate() }}%
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>

      <div v-else class="no-data">
        <el-empty description="暂无统计数据" />
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";
import { Refresh } from "@element-plus/icons-vue";
import {
  getAnnouncementStatisticsApi,
  AnnouncementManagementUtils,
  type AnnouncementStatistics
} from "@/api/announcement-management";

// Props
interface Props {
  visible: boolean;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  "update:visible": [value: boolean];
}>();

// 响应式数据
const loading = ref(false);
const statistics = ref<AnnouncementStatistics | null>(null);

// 计算属性
const dialogVisible = computed({
  get: () => props.visible,
  set: value => emit("update:visible", value)
});

// 加载统计数据
const loadStatistics = async () => {
  loading.value = true;
  try {
    const response = await getAnnouncementStatisticsApi();
    if (response && response.code === 200 && response.data) {
      statistics.value = response.data;
    }
  } catch (error: any) {
    console.error("加载统计数据失败:", error);
    ElMessage.error(`加载统计数据失败: ${error?.message || "未知错误"}`);
  } finally {
    loading.value = false;
  }
};

// 计算百分比
const getDraftPercentage = () => {
  if (!statistics.value || statistics.value.total_count === 0) return 0;
  return Math.round(
    (statistics.value.draft_count / statistics.value.total_count) * 100
  );
};

const getPublishedPercentage = () => {
  if (!statistics.value || statistics.value.total_count === 0) return 0;
  return Math.round(
    (statistics.value.published_count / statistics.value.total_count) * 100
  );
};

const getExpiredPercentage = () => {
  if (!statistics.value || statistics.value.total_count === 0) return 0;
  return Math.round(
    (statistics.value.expired_count / statistics.value.total_count) * 100
  );
};

const getDeletedPercentage = () => {
  if (!statistics.value || statistics.value.total_count === 0) return 0;
  return Math.round(
    (statistics.value.deleted_count / statistics.value.total_count) * 100
  );
};

// 计算发布率
const getPublishRate = () => {
  if (!statistics.value || statistics.value.total_count === 0) return 0;
  return Math.round(
    (statistics.value.published_count / statistics.value.total_count) * 100
  );
};

// 计算过期率
const getExpireRate = () => {
  if (!statistics.value || statistics.value.published_count === 0) return 0;
  return Math.round(
    (statistics.value.expired_count / statistics.value.published_count) * 100
  );
};

// 计算平均浏览量
const getAverageViewCount = () => {
  if (!statistics.value || statistics.value.published_count === 0) return 0;
  const avg = Math.round(
    statistics.value.total_view_count / statistics.value.published_count
  );
  return AnnouncementManagementUtils.formatViewCount(avg);
};

// 格式化浏览次数
const formatViewCount = (count: number) => {
  return AnnouncementManagementUtils.formatViewCount(count);
};
</script>

<style scoped>
.statistics-container {
  min-height: 400px;
}

.statistics-content {
  max-height: 70vh;
  overflow-y: auto;
}

.stats-card {
  margin-bottom: 20px;
}

.stats-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
}

.stat-item {
  padding: 20px;
  text-align: center;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.stat-value {
  margin-bottom: 8px;
  font-size: 32px;
  font-weight: bold;
}

.stat-value.total {
  color: #409eff;
}

.stat-value.published {
  color: #67c23a;
}

.stat-value.draft {
  color: #909399;
}

.stat-value.expired {
  color: #e6a23c;
}

.chart-container {
  padding: 10px;
}

.chart-title {
  margin-bottom: 15px;
  font-weight: bold;
  text-align: center;
}

.status-chart {
  /* space-y 不是有效的 CSS 属性，使用 gap 或 margin 替代 */
  > * + * {
    margin-top: 10px;
  }
}

.status-item {
  margin-bottom: 15px;
}

.status-bar {
  height: 20px;
  margin-bottom: 5px;
  overflow: hidden;
  background-color: #f0f0f0;
  border-radius: 10px;
}

.status-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.draft-fill {
  background-color: #909399;
}

.published-fill {
  background-color: #67c23a;
}

.expired-fill {
  background-color: #e6a23c;
}

.deleted-fill {
  background-color: #f56c6c;
}

.status-info {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.status-label {
  color: #606266;
}

.status-value {
  font-weight: bold;
  color: #303133;
}

.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.dialog-footer {
  text-align: right;
}
</style>
